<template>
    <div class="login bg_color ui_hide" id="div_body" style="padding-top:1.3rem;" :style="styleBody()">
        <div>
            <div class="ub ub-ver">
                <!--账号-->
                <div class="ub ub-ac" style="border-bottom: 1px solid #e9ebee;">
                    <div
                        style="background-image: url('static/image/trip/phoneicon.png');background-repeat: no-repeat;background-size: 100% 100%;width: 0.13rem;height: 0.15rem;margin-left: 0.2rem;"></div>
                    <div class="ub-f1 mui-input-row" style="width: 1%;padding:0.2rem 0.12rem;">
                        <input type="tel" class="mui-input-clear ulev1 phone" maxlength="11" placeholder="请输入手机号"
                               v-model="phone">
                        <span class="mui-icon mui-icon-clear mui-hidden"></span>
                    </div>
                </div>

                <!--验证码-->
                <div class="ub ub-ac" style="border-bottom: 1px solid #e9ebee;">
                    <div
                        style="background-image: url('static/image/trip/lockicon.png');background-repeat: no-repeat;background-size: 100% 100%;width: 0.13rem;height: 0.15rem;margin-left: 0.2rem;"></div>
                    <div class="ub-f1" style="width: 1%; padding:0.2rem 0.12rem;"><input v-model="code"
                                                                                         class="ulev1 code" type="tel"
                                                                                         placeholder="请输入验证码"></div>
                    <div class="send_code"
                         style="border-radius: 50px;background-color: #e9ebee;color: #2D2E3A;line-height: 1;padding: 0.07rem 0.12rem;margin-right: 0.12rem;"
                         @click="sendCode()" v-html="sendCodeBtnInfo">发送验证码
                    </div>
                </div>
            </div>
        </div>
        <div @click="login" class="ulev1 login"
             style="margin: 0.6rem 0.08rem 0 0.08rem;border-radius: 100px;background-color: #2d2e3a;line-height: 1;color: #ffffff;padding: 0.13rem 0;text-align: center;">
            登 录
        </div>
    </div>
</template>

<script>
    import tool from '../../config/mUtil/tool'
    import info from '../../config/info'
    import {gtInit} from './gt'
    import {Toast, Popup} from 'mint-ui'
    import {startGee, login, sendMsg} from '../../service/httpService'

    export default {
        name: "login",
        data() {
            return {
                phone: '',
                code: '',
                captchaObj: null,
                sendCodeBtnInfo: '发送验证码',
                routerName: 'home',
                routerQuery: {},
                showXieyi: false,
                styleFootDiv:{
                    marginTop:'1.6rem',
                    marginLeft:'0.2rem',
                    marginRight:'0.2rem'
                }
//                styleFootDiv: {
//                    position: 'absolute',
//                    bottom: '0.3rem',
//                    left: '0.2rem',
//                    right: '0.2rem'
//                }
            }
        },
        watch: {
            phone() {
                this.phone = this.phone.replace(/[^\d]/g, '');
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                tool.log(to);
                if (to.query.routerName) {
                    vm.routerName = to.query.routerName || 'home';
                    vm.routerQuery = to.query || {};
                }
            })
        },
        mounted() {
            this.load();
        },
        methods: {
            seeXieyi() {
                this.showXieyi = true;
            },
            clickBoxClear() {
                this.showXieyi = false;
            },
            styleBody() {
                return {
                    height: document.documentElement.clientHeight / 100 + 'rem'
                }
            },
            load() {
                let time = (new Date()).getTime();
                startGee(time).then(res => {
                    let data = res.data;
                    // 调用 initGeetest 进行初始化
                    // 参数1：配置参数
                    // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
                    window.initGeetest({
                        // 以下 4 个配置参数为必须，不能缺少
                        gt: data.gt,
                        challenge: data.challenge,
                        offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                        new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

                        product: "bind", // 产品形式，包括：float，popup
                        width: "3rem"
                        // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
                    }, captchaObj => {
                        this.captchaObj = captchaObj;
                        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
                        captchaObj.appendTo('#embed-captcha');
                        captchaObj.onSuccess(() => {
                            this.sendMsg(captchaObj);
                        });
                        captchaObj.onClose(function () {
                            // 用户把验证关闭了，这时你可以提示用户需要把验证通过后才能进行后续流程
                            tool.log("关闭验证")
                        });
                        captchaObj.onError(function () {
                            Toast('出错了，请稍后再试!');
                        });

                    });
                }).catch(e => {
                    Toast(info.infoApiError)
                });
            },
            login() {
                this.$delete(this.routerQuery, 'routerName');
                if (this.phone.length !== 11) {
                    Toast('请输入正确的手机号');
                    return;
                }
                if (this.code.length === 0) {
                    Toast('请输入正确的验证码');
                    return;
                }
                let data = {
                    phone: this.phone,
                    code: this.code
                };
                login(data).then(res => {
                    if (res.flag === false) {
                        Toast(res.msg);
                    } else {
                        Toast('登录成功');
                        tool.setStorage(info.codeToken,res.data.access_token,'d30');
                        tool.$router.push(this, {
                            name: this.routerName,
                            query: this.routerQuery
                        });
                    }
                }).catch(e => {
                    Toast(info.infoApiError);
                })
            },
            sendCode() {
                if (this.phone.length !== 11) {
                    Toast('请输入正确手机号');
                    return false;
                }

                this.captchaObj && this.captchaObj.verify();
            },
            sendMsg(captchaObj) {
                if (this.sendCodeBtnInfo === "发送验证码") {
                    let count = 30;
                    tool.timer({
                        toDo: obj => {
                            if (count > 1) {
                                count--;
                                this.sendCodeBtnInfo = `剩余${count}秒`;
                            } else {
                                this.sendCodeBtnInfo = '发送验证码';
                                obj.clear();
                            }
                        }
                    });
                    let result = captchaObj.getValidate();
                    let data = {
                        geetest_challenge: result.geetest_challenge,
                        geetest_validate: result.geetest_validate,
                        geetest_seccode: result.geetest_seccode,
                        phone: this.phone
                        // 其他服务端需要的数据，比如登录时的用户名和密码
                    };
                    sendMsg(data).then(res => {
                        if (res.flag === false) {
                            Toast(res.msg);
                            captchaObj.reset();
                        } else {
                            Toast('验证码发送成功');
                            captchaObj.reset();
                        }
                    }).catch(e => {
                        Toast(info.infoApiError);
                        captchaObj.reset();
                    })
                }


            }

        }
    }
</script>
<style type="text/scss" lang="scss">
    .geetest_copyright, .geetest_panel_footer {
        display: none !important;
    }

    .login {
        .mint-popup {
            top: 0;
        }
    }

</style>
<style scoped type="text/scss" lang="scss">
    @import "./../../style/mixin.scss";
    @import "../../../static/css/ui-base.css";

    ::-webkit-input-placeholder {
        color: #686872;
    }

    .mui-toast-container {
        bottom: 50% !important;
    }

    /*.mui-toast-message {
        background: url(/app/themes/default/images/toast.png) no-repeat center 10px #000;
        opacity: 0.6;
        color: #fff;
        width: 180px;
        padding: 70px 5px 10px 5px;
    }*/
    .geetest_copyright, .geetest_feedback {
        visibility: hidden !important;
    }

    .model {
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        /*-webkit-filter: blur(6px);
filter: blur(6px);*/
        background-color: rgba(0, 0, 0, 0.4);
    }

    .model_box {
        position: fixed;
        top: 0.23rem;
        bottom: 0.23rem;
        left: 0.2rem;
        right: 0.2rem;
        border-radius: 0.05rem;
        background-color: #fff;
        /*-webkit-border-top-left-radius: 8px;
        -webkit-border-top-right-radius: 8px;*/
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .9s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }


</style>
